<template>
  <view class="auth-wrap">
    <logo />
    <fast-login type="userinfo" @success="onSuccess">
      <view class="get-userinfo">
        授权获取头像昵称
      </view>
    </fast-login>
  </view>
</template>

<script lang="ts">
/**
 * 首页
 * @author michealZ
 */
import { Vue, Component, Mixins } from 'vue-property-decorator';

import Logo from '@/components/Logo/index.vue';
import FastLogin from '@/components/FastLogin/index.vue';

// 不能这么引入组件😑
// 编译出来的json文件路径会按照声明的路径来，就找不到了
// import { Logo } from '@/components';

@Component({
  components: {
    Logo,
    FastLogin
  }
})
export default class extends Vue {
  async onLoad(param: any | {}) {
    console.log('index page onload, param:', param);
  }

  private onSuccess(ret: any) {
    console.log(ret.userInfo);

    wx.showLoading({title: '别急哦...', mask: true});

    // 调用云函数
    wx.cloud.callFunction({
      name: 'login',
      data: {
        userInfo: ret.userInfo
      }
    }).then((res: any) => {
      wx.hideLoading();

      console.log('[云函数] [login] 调用成功: ', res);

      wx.setStorageSync('user-info', {...res.result.userInfo});

      wx.reLaunch({
        url: '/pages/index/index',
      });
    }).catch(err => {
      wx.hideLoading();

      console.error('[云函数] [login] 调用失败', err);
    });
  }
};
</script>

<style lang='stylus' scoped>
.auth-wrap
  padding-top 200rpx

.get-userinfo
  height 90rpx
  width 600rpx
  margin 100rpx auto 0
  line-height 90rpx
  text-align center
  color #fff
  background #333
  border-radius 20rpx

  &:active
    background #666
</style>
